<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title>教导读书会一周年</title>
    <style>

        html,body{
            margin:0;
            padding:0;
        }

        body{
            max-width:500px;
            margin:auto;
        }
        img{
            padding:0;
            margin:0;

        }
        body>div{
            width:100%;
            position: relative;
        }

        body>div>img{
            width:100%;
            display: block;
        }

        .vbox{
            position: absolute;
            bottom: 0;
            height:10vw;
            left: 37%;

        }
        .vbox img{
            display: block;
            height:100%;
            float: left;
        }

        .vbox span{
            position: absolute;
            height:100%;
        }

        .vbox .cycle{
            height:5px;
            width:5px;
            background:red;
            display: inline-block;
            border-radius: 100%;
            margin-left:5px;
            left:103%;
        }

        .vbox .time{
            color:#fff;
            line-height:5vw;
            left:105%;
            top:30%;
        }

        
        .hide{
            display: none !important;
        }
    </style>
</head>
<body id="body">

    <div id="first">
        <img src="/images/other/oneyear/1.jpg">
        <audio src="/images/other/oneyear/first.mp3" class="hide" id="first-audio" onended="app.ended('first')"></audio>
        <div class="vbox video1">
            <img src="/images/other/oneyear/unread.png" class="unread static" onclick="app.play('first')">
            <img src="/images/other/oneyear/reading.gif" class="reading move hide" onclick="app.pause('first')">
            <img src="/images/other/oneyear/readed.png" class="readed   hide" onclick="app.restart('first')">
            <img src="/images/other/oneyear/readeding.gif" class="readeding  hide"  onclick="app.repause('first')">
            <span class="cycle"></span>
            <span class="time">18"</span>
        </div>
    </div>


    <div id="daidu">
        <img src="/images/other/oneyear/2.jpg">
        <audio src="/images/other/oneyear/daidu.mp3" class="hide" id="daidu-audio" onended="app.ended('daidu')"></audio>
        <div class="vbox video1">
            <img src="/images/other/oneyear/unread.png" class="unread static"          onclick="app.play('daidu')">
            <img src="/images/other/oneyear/reading.gif" class="reading move hide"   onclick="app.pause('daidu')">
            <img src="/images/other/oneyear/readed.png" class="readed   hide"     onclick="app.restart('daidu')">
            <img src="/images/other/oneyear/readeding.gif" class="readeding  hide"  onclick="app.repause('daidu')">
            <span class="cycle"></span>
            <span class="time">60"</span>
        </div>
    </div>


    <div id="app">
        <img src="/images/other/oneyear/3.jpg">
        <audio src="/images/other/oneyear/app.mp3" class="hide" id="app-audio" onended="app.ended('app')"></audio>
        <div class="vbox video1">
            <img src="/images/other/oneyear/unread.png" class="unread   static"           onclick="app.play('app')">
            <img src="/images/other/oneyear/reading.gif" class="reading move hide"        onclick="app.pause('app')">
            <img src="/images/other/oneyear/readed.png" class="readed    hide"      onclick="app.restart('app')">
            <img src="/images/other/oneyear/readeding.gif" class="readeding  hide"    onclick="app.repause('app')">
            <span class="cycle"></span>
            <span class="time">60"</span>
        </div>
    </div>


    <div><img src="/images/other/oneyear/4.jpg"></div>
    <div><img src="/images/other/oneyear/5.jpg"></div>
    <div><img src="/images/other/oneyear/6.jpg"></div>
    <div>
        <img src="/images/other/oneyear/7.jpg">
        <video src="http://media.jdclo.com/video/dushuhui-one-year.mp4"  style="
        position: absolute;
        width:90vw;
        left:5vw;
        top:30vw;
        background-color:#333;
        background-image:url('/images/old-banner.jpg');
        background-size:cover;
        border:1vw solid #333;
        box-sizing: border-box;

        background-repeat: no-repeat;
        background-position: center;

        " controls></video>
    </div>
    <div><img src="/images/other/oneyear/8.jpg"></div>

</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<script>
    var app = {
        play:function(id)
        {
            //关闭其他所有动画
            $('.move').addClass('hide');
            $('.static').removeClass('hide');
            $("#" + id + " .unread").addClass('hide');
            $("#" + id + " .reading").removeClass('hide');
            var cycle = $('#' + id + " .cycle");
            if(cycle)
            {
                cycle.remove();
            }
            this.beginplay(id);
        },
        pause: function (id) {
            $("#" + id + " .unread").removeClass('hide');
            $("#" + id + " .reading").addClass('hide');
            document.getElementById(id+"-audio").pause();
        },
        ended:function (id)
        {
            $("#" + id + " .unread").remove();
            $("#" + id + " .reading").remove();
            $('#' + id + " .readed").removeClass('hide').addClass('static');
            $('#' + id + " .readeding").addClass('move');

        },
        restart:function(id)
        {
            $('.move').addClass('hide');
            $('.static').removeClass('hide');
            $("#" + id + " .readeding").removeClass('hide');
            $("#" + id + " .readed").addClass('hide');
            this.beginplay(id);
        },
        repause:function(id) {
            document.getElementById(id+"-audio").pause();
            $("#" + id + " .readeding").addClass('hide');
            $("#" + id + " .readed").removeClass('hide');
        },
        beginplay:function(id)
        {
            switch(id)
            {
                case "first":
                    document.getElementById("daidu-audio").pause();
                    document.getElementById("app-audio").pause();
                    break;
                case "daidu":
                    document.getElementById("first-audio").pause();
                    document.getElementById("app-audio").pause();
                    break;
                case "app":
                    document.getElementById("first-audio").pause();
                    document.getElementById("daidu-audio").pause();
                    break;
            }
            document.getElementById(id+"-audio").play();
        }
    };
    var host        = "{{asset('')}}";

    window.onload = function(){

        @if(!is_windows())
            var title   = "我们不一样";
            var link    = host + "web/Software/index?c=web/HomeController&a=jiaodao_one_year";
            var imgUrl  = host + "/images/other/oneyear/share.jpg";
            var desc    = "教导读书会一周年啦！！！";
            var groupTitle = title + "\n" + desc ;
            wx.config(<?php echo $weixinJs->config(array('onMenuShareAppMessage', 'onMenuShareTimeline'), false) ?>);
            wx.ready(function(){

                wx.onMenuShareTimeline({
                    title: groupTitle,
                    link: link,
                    imgUrl: imgUrl,
                    //type:'music',
                    //dataUrl:musicdata,
                    success: function () {


                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });

                //获取“分享给朋友”
                wx.onMenuShareAppMessage({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                    },
                    cancel: function () {
                    }
                });
            });
        @endif

        auto_scroll();
    }

    var timer   = "";
    //自动滚动
    function auto_scroll()
    {
        timer = setInterval(function()
        {
            var top = $(document).scrollTop();
            top++;
            $(document).scrollTop(top);
        },50)
    }

    document.getElementById('body').addEventListener('touchstart',function(){
        if(timer)
        {
            clearInterval(timer);
        }
    })

</script>
